<template>
  <div v-if="isGain" class="data-page">
    <div class="data-hint">
      你正在预览{{ route.query.city }}的天气信息
      <span v-if="isShow">，可以通过右上角的"+"号按钮保存起来</span>
    </div>
    <div class="data-item">
      <h1>当日气温是: {{ lives.temperature }}摄氏度</h1>
      <h1>当日天气是: {{ lives.weather }}</h1>
      <h1>当日风向是: {{ lives.winddirection }}风</h1>
      <h1>当日风力是: {{ lives.windpower }}级</h1>
    </div>
    <div class="line"></div>
    <div class="weather-card-wrap">
      <WeatherCard :casts="casts" />
    </div>
  </div>
  <div v-else class="loading">
    正在获取城市天气信息...
  </div>
</template>

<script setup>
import { getCityWeather } from '@/api/index.js';
import WeatherCard from '@/components/WeatherCard.vue';
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
const route = useRoute();

const lives = ref({
  temperature: '', //温度
  weather: '', //天气
  winddirection: '', //风向
  windpower: '', //风力
});

const casts = ref();
const isGain = ref(false);

const porps = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['addCity']);

onMounted(() => {
  getCityWeather(route.query.adcode, 'base').then((res) => {
    lives.value = res.lives[0];
  });
  getCityWeather(route.query.adcode, 'all').then((res) => {
    casts.value = res.forecasts[0].casts;
    isGain.value = true;
  });
  emit('addCity', {
    adcode: route.query.adcode,
    city: route.query.city,
    temperature: '',
  });
});
</script>

<style lang="scss" scoped>
.data-page {
  padding: 80px 0 0;
  min-height: 100vh;
  background-color: rgb(0 102 138);
  .data-hint {
    line-height: 25px;
    padding: 8px;
    color: white;
    background-color: rgb(0 78 113);
    text-align: center;
  }
  .data-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 24px 80px 0;
    padding: 0 160px;
    align-items: center;
    gap: 16px;
    color: white;
    line-height: 24px;
  }
  .line {
    width: 100%;
    height: 24px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  }
  .weather-card-wrap {
    margin: 0 80px;
    padding: 0 160px;
  }
}
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: white;
  font-size: 24px;
  background-color: rgb(0 102 138);
}
</style>
